<template>
  <h2
    class="mb-3 text-2xl font-bold xl:text-3xl enter-x xl:text-left"
    style="letter-spacing: 2px;color: color: #354258;;"
  >
    {{ is_init == 0 ? '创建密码' : '登录' }}
  </h2>
  <a-form class="p-4 enter-x" v-if="is_init == 1">
    <a-form-item name="password" class="enter-x" v-bind="validateInfos.password">
      <a-input-password
        type="password"
        size="large"
        visibilityToggle
        v-model:value="formData.password"
        placeholder="密码"
        @pressEnter="handleLogin"
      />
    </a-form-item>
    <a-row class="enter-x">
      <a-col :span="12">
        <a-form-item>
          <a-checkbox v-model:checked="rememberMe" size="small"> 记住我 </a-checkbox>
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item class="enter-x">
      <a-button type="primary" size="large" block @click="handleLogin" :loading="loading">
        登录
      </a-button>
    </a-form-item>
  </a-form>

  <a-form class="p-4 enter-x" :model="creatForm" :rules="creatRules" ref="creatFormRef" v-else>
    <a-form-item name="password" class="enter-x" v-bind="validateInfos.password">
      <a-input-password
        size="large"
        visibilityToggle
        v-model:value="creatForm.password"
        placeholder="请输入密码"
      />
    </a-form-item>

    <a-form-item name="re_password" class="enter-x" v-bind="validateInfos.password">
      <a-input-password
        size="large"
        visibilityToggle
        v-model:value="creatForm.re_password"
        placeholder="请再次输入密码"
      />
    </a-form-item>
    <a-form-item class="enter-x">
      <a-button type="primary" size="large" block @click="subcreatPwd" :loading="loading">
        创建密码
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  import { defineComponent, reactive, ref, onMounted } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUserStore } from '/@/store/modules/user';
  import { Form } from 'ant-design-vue';
  import { check_is_init, creatPwd } from '/@/api/sys/user';
  import { notification } from 'ant-design-vue';
  export default defineComponent({
    setup() {
      const userStore = useUserStore();
      const loading = ref(false);
      const rememberMe = ref(false);
      const is_init = ref(1);
      //创建密码区域
      const creatFormRef = ref();
      const creatForm = reactive({
        password: '',
        re_password: '',
      });

      const creatRules = reactive({
        password: [{ required: true, message: '请输入账号' }],
        re_password: [{ required: true, message: '请输入密码' }],
      });

      function subcreatPwd() {
        creatFormRef.value.validate().then(() => {
          creatPwd(creatForm).then((res) => {
            notification.success({
              message: '密码创建成功',
              duration: 3,
            });

            is_init.value = 1;
          });
        });
      }
      //获取初始化
      function getInit() {
        check_is_init().then((res) => {
          is_init.value = res.is_init;
        });
      }
      // 登录密码区域
      const useForm = Form.useForm;
      //数据对象
      const formData = reactive({
        account: 'admin',
        password: '',
      });
      const formRules = reactive({
        account: [{ required: true, message: '请输入账号' }],
        password: [{ required: true, message: '请输入密码' }],
      });
      const { validate, validateInfos } = useForm(formData, formRules);

      onMounted(() => {
        //如果记住我 则回显缓存的账号密码
        rememberMe.value = userStore.getisRemember || false;
        if (rememberMe.value) {
          const account = localStorage.getItem('account') || '';
          const password = localStorage.getItem('password') || '';
          formData.account = account;
          formData.password = password;
        }
        getInit();
      });
      //登录
      function handleLogin() {
        validate()
          .then((res) => {
            loading.value = true;
            userStore
              .login({
                password: formData.password,
                account: 'admin',
                isRemember: rememberMe.value,
                mode: 'none',
              })
              .then((res) => {
                loading.value = false;
              });
          })
          .catch((err) => {
            loading.value = false;
          });
      }

      return {
        is_init,
        validateInfos,
        handleLogin,
        rememberMe,
        loading,
        formData,
        creatForm,
        creatRules,
        creatFormRef,
        subcreatPwd,
      };
    },
  });
</script>
